<template>
  <div class="Avatar">
    <el-button @click="dialogVisible = true">图片裁剪</el-button>
    <avatar-cropper
      :dialogVisible.sync="dialogVisible"
      @closeAvatarDialog="closeAvatarDialog"
    ></avatar-cropper>
  </div>
</template>

<script>
import avatarCropper from "@/views/test/avatarCropper/components/AvatarCropper.vue";
export default {
  components: {
    avatarCropper,
  },
  data() {
    return {
      dialogVisible: false,
    };
  },
  methods: {
    closeAvatarDialog(data) {
      console.log(data);
      this.dialogVisible = false;
    },
  },
};
</script>

<style lang="less" scoped>
.Avatar {
  width: 1200px;
  margin: 0 auto;
  padding-top: 100px;
}
</style>
